<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登陆界面</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" th:href="@{/home/css/bootstrap.css}">
</head>
<body>
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">登陆界面</div>
        <div class="panel-body">
            <form role="form" name="form" th:action="@{/authentication/form}" method="post"><!--对/loginURL 的POST 将尝试对用户进行身份验证-->
                <p th:if="${param.logout}">已注销</p><!--如果查询参数error存在，则尝试进行身份验证并失败-->
                <p th:if="${param.error}">有错误，请重试</p><!--如果查询参数logout存在，则表示用户已成功注销-->
                <div class="form-group">
                    <label for="username">用户名:</label>
                    <input id="username" name="username" type="text" class="form-control" placeholder="请输入用户名"/><!--用户名必须作为名为username的HTTP参数出现-->
                </div>
                <div class="form-group">
                    <label for="password">密码:</label>
                    <input id="password" name="password" type="password" class="form-control" placeholder="请输入密码"/><!--密码必须作为名为password的HTTP参数出现-->
                </div>
                <!--<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>&lt;!&ndash;自动生成 csrf 令牌，防止 csrf （跨站点请求伪造）&ndash;&gt;-->
                <div class="form-group">
                    <label for="imageCode">验证码:</label>
                    <input type="text" id="imageCode" name="imageCode">
                    <img th:src="@{/code/image(width=60, height=26)}" alt="验证码图片" />
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="remember-me" name="remember-me" class="checkbox"/>记住我
                    </label>
                </div>
                <input id="login" type="submit" class="btn btn-block btn-primary" value="登录系统"/>
            </form>
        </div>
        <div class="panel-footer">商城</div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">短信登陆</div>
        <div class="panel-body">
            <form role="form" name="form" th:action="@{/authentication/mobile}" method="post"><!--对/loginURL 的POST 将尝试对用户进行身份验证-->
                <p th:if="${param.logout}">已注销</p><!--如果查询参数error存在，则尝试进行身份验证并失败-->
                <p th:if="${param.error}">有错误，请重试</p><!--如果查询参数logout存在，则表示用户已成功注销-->
                <div class="form-group">
                    <label for="mobile">手机号:</label>
                    <input id="mobile" name="mobile" type="text" class="form-control" placeholder="请输入手机号" value="13012345678"/>
                </div>
                <div class="form-group">
                    <label for="smsCode">短信验证码:</label>
                    <input id="smsCode" name="smsCode" type="text" class="form-control" placeholder="请输入密码"/>
                </div>
                <div class="form-group">
                    <a href="#" onclick="js_method()">发送验证码</a>
                    <!--<a th:href="@{/code/sms(mobile=13012345678)}">发送验证码</a>-->
                </div>
                <input id="login2" type="submit" class="btn btn-block btn-primary" value="登录系统"/>
            </form>
        </div>
        <div class="panel-footer">商城</div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">社交登录</div>
        <div class="panel-body">
            <a th:href="@{/auth/qq}">QQ登陆</a>
        </div>
        <div class="panel-footer">商城</div>
    </div>
</div>
<script th:src="@{/home/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/home/js/bootstrap.min.js}"></script>
<script>
    function js_method() {
        $.get("/code/sms?mobile=13012345678", function(result){});
    }
</script>
</body>
</html>
